// 导航栏组件（返回  标题  搜索）
// 按钮
// loading框
// 弹框
// 表格
// 	https://www.layui.com/demo/table.html
// 	https://www.iviewui.com/components/table 

// 表格
Vue.component('vanTable', {
    props: ['columns', 'data'],
    template: `<table border="1" cellpadding="20" cellspacing="0">
        <tr>
          <th v-for="item in columns">{{item.title}}</th>
        </tr>
        <tr v-for="item in data">
          <td v-for="col in columns">
            {{item[col.key]}}
          </td>
        </tr>
    </table>`
  })

  //弹框
  Vue.component('van-tips', {
    props: {
      title: String,
      show: Boolean,
    },
    template: '<div class="van-tips" v-show="show">{{title}}</div>'
  })

  //loading
  Vue.component('van-loading', {
    props: {
      show: Boolean
    },
    template: `<div class="van-loading" v-show="show"></div>`
  })
  
  //按钮
  Vue.component('vanButton', {
    props: {
      title: String,
      type: {
        type: String,
        validator(val) {
          return ['green', 'red'].indexOf(val) != -1 
        }
      }
    },
    template: `<button @click="$emit('click')" class="van-button" :style="{background: type}">{{title}}</button>`
  })

  //导航
  Vue.component('vanNavBar', {
    props: ['title'],
    template: `<div class="van-nav-bar">
      <span @click="$emit('click-left')">&lt;返回</span>
      <span>{{title}}</span>
      <span @click="$emit('click-right')">搜索</span>
    </div>`
  })